<template>
  <div class="dataContainer" v-if="drawer">
    <el-drawer v-model="drawer" title="字典列表" size="55%" style="max-width: 950px;">
      <!-- Search start -->
      <el-form
        :inline="true"
        size="small"
        :model="queryParams"
        class="demo-form-inline searchContainer"
      >
        <el-form-item label="字典名称: ">
          <el-input
            v-model="queryParams.dicName"
            placeholder="请输入字字典名称"
            @keyup.enter="onSearch"
          />
        </el-form-item>
        <el-form-item label="字典值: ">
          <el-input
            v-model="queryParams.dicValue"
            placeholder="请输入字典值"
            @keyup.enter="onSearch"
          />
        </el-form-item>
        <div style="text-align: right;">
          <el-button
            class="bs-form-btn"
            size="small"
            type="primary"
            @click="onSearch"
            ><el-icon><Search /></el-icon>查 询</el-button
          >
          <ResetButton :queryParams="queryParams" />
          <el-button
            size="small"
            type="primary"
            @click="openModal"
            ><el-icon><Plus /></el-icon>新 增
          </el-button>
        </div>
      </el-form>
      <!-- Search end -->

      <!-- Table start -->
      <div style="padding-top: 0">
        <el-table
          ref="tableRef"
          v-loading="tableLoading"
          :border="true"
          class="bs-table"
          :data="tableData"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
           table-layout='auto'
        >
          <el-table-column prop="dicTypeCode" label="字典类型" fixed  width="160"/>
          <el-table-column prop="dicName" label="字典名称"   width="150"/>
          <el-table-column prop="dicValue" label="字典值"   width="150"/>
          <el-table-column prop="dicSort" label="排序"   width="50"/>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip />
          <el-table-column
            fixed="right"
            label="操作"
            width="180"
          >
            <template #default="scope">
              <el-button
                size="small"
                link
                @click="openEditModal(scope.row)"
                type="success"
                ><el-icon><Edit /></el-icon> 修改</el-button
              >
              <el-button
                size="small"
                link
                type="danger"
                @click="deleteDicType(scope.row)"
                ><el-icon><Delete /></el-icon> 删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          small="small"
          disabled="disabled"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
          @pagination="selectByPage"
        />
        <AddOrUpdate ref="addOrUpdateRef" @flushTable="onSearch" />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  selectByPage,deleteDictionary
} from "@/api/system/dictionary";
import AddOrUpdate from "./addOrUpdate.vue";
export default {
  components: {
    AddOrUpdate,
  },
  data() {
    return {
      drawer: false,
      tableTotal: 0,
      tableLoading: false,
      tableData: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 500,
        dicName: "",
        dicValue: "",
        dicTypeCode: "",
      },
    };
  },
  methods: {
    openDrawer(row){
      this.queryParams.dicTypeCode = row.dicTypeCode
      this.drawer = true
      this.selectByPage();
      console.log(row)
    },
    selectByPage() {
      this.tableLoading = true;
      selectByPage(this.queryParams)
        .then((res) => {
          this.tableLoading = false;
          if (res.code === 1) {
            this.tableData = res.data.records;
            this.tableTotal = res.data.total;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 搜索
    onSearch() {
      this.queryParams.pageNo = 1;
      this.selectByPage();
    },
    openModal() {
      this.$refs.addOrUpdateRef.openModal({'dicTypeCode':this.queryParams.dicTypeCode});
    },
    openEditModal(row) {
      this.$refs.addOrUpdateRef.openModal(row);
    },
    deleteDicType(row) {
      this.$confirm("请确认是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          
          let params = {
            dicId: row.dicId,
            dicTypeCode:row.dicTypeCode
          }
          deleteDictionary(params).then((res) => {
            console.log('res',res);
            
            if (res.code === 1) {
              this.$message.success(res.message)
              this.onSearch();
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
/deep/.el-drawer__header {
  margin-bottom: 0px;
}
</style>
